<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple data grid</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="extra/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="extra/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="simple.datagrid.css">
    <link rel="stylesheet" href="extra/bower_components/prism/themes/prism-okaidia.css">
    <link rel="stylesheet" href="extra/documentation.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="jumbotron" id="simpledatagrid">
        <div class="container">
            <h1>Simple data grid</h1>
            <p>
                Simple-data-grid is a <strong>datagrid</strong> widget.
            </p>
            <p>
                Written in Coffeescript
            </p>
            <p>
                <a class="btn btn-primary" href="https://github.com/mbraak/simple-data-grid/archive/master.zip">
                    Download simple-data-grid
                </a>
            </p>
        </div>
    </div>

    <div class="container">

        <div class="row">
            <div class="col-md-3">
                <div class="bs-sidebar hidden-print" id="menu" role="complementary">
                    <a href="#simpledatagrid"><h2>Simple data grid</h2></a>
                    <ul class="nav bs-sidenav">
                        <li><a href="#features">Features</a></li>
                        <li><a href="#requirements">Requirements</a></li>
                        <li><a href="#downloads">Downloads</a></li>
                        <li><a href="#demo">Demo</a></li>
                        <li>
                            <a href="#examples">Examples</a>
                            <ul class="nav">
                                <li><a href="#tutorial">Tutorial</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#options">Options</a>
                            <ul class="nav">
                                <li><a href="#options-auto_escape">auto_escape</a></li>
                                <li><a href="#options-data">data</a></li>
                                <li><a href="#options-on_generate_footer">on_generate_footer</a></li>
                                <li><a href="#options-on_generate_tr">on_generate_tr</a></li>
                                <li><a href="#options-order_by">order_by</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#functions">Functions</a>
                            <ul class="nav">
                                <li><a href="#functions-addcolumn">addColumn</a></li>
                                <li><a href="#functions-getcolumns">getColumns</a></li>
                                <li><a href="#functions-getselectedrow">getSelectedRow</a></li>
                                <li><a href="#functions-loaddata">loadData</a></li>
                                <li><a href="#functions-reload">reload</a></li>
                                <li><a href="#functions-removecolumn">removeColumn</a></li>
                                <li><a href="#functions-selectrow">selectRow</a></li>
                                <li><a href="#functions-setcurrentpage">setCurrentPage</a></li>
                                <li><a href="#functions-setparameter">setParameter</a></li>
                                <li><a href="#functions-url">url</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#events">Events</a>
                            <ul class="nav">
                                <li><a href="#events-load_data">datagrid.load_data</a></li>
                                <li><a href="#events-select">datagrid.select</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9" id="main">
                <p>
                    The project is <a href="https://github.com/mbraak/simple-data-grid">hosted on github</a> and has
                    <a href="test/test.html">unit tests</a>.
                </p>

                <p>
                    <a href="https://github.com/mbraak/jqTree">
                        <img src="https://badge.fury.io/bo/simpledatagrid.png" alt="Bower version">
                    </a>
                </p>

                <h2 id="features">Features</h2>
                <ul>
                    <li>Works on Internet Explorer 7+, Firefox 3.6+, Chrome and Safari</li>
                    <li>Written in Coffeescript</li>
                </ul>

                <h3 id="requirements">Requirements</h3>
                <ul>
                    <li><a href="http://jquery.com">jQuery 1.5+</a></li>
                </ul>

                <h3 id="downloads">Downloads</h3>
                <p>
                    <a href="https://github.com/mbraak/simple-data-grid/tarball/master">simple-data-grid.tar.gz</a>
                </p>

                <h2 id="demo">Demo</h2>
                <table id="demo-table" data-url="/fruits/">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Latin name</th>
                        </tr>
                    </thead>
                </table>

                <pre><code class="language-markup">&lt;table id="demo-table" data-url="/fruits.json"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Latin name&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;</code></pre>

                <pre><code class="language-javascript">$(function() {
  $('#demo-table').simple_datagrid();
});</code></pre>

                <h2 id="examples">Examples</h2>
                <ul>
                    <li><a href="examples/tutorial.html" id="tutorial">Tutorial</a></li>
                </ul>

                <h2 id="options">Options</h2>

                <h3 id="options-auto_escape">auto_escape</h3>
                <p>
                    Auto-escape the html (true / false). Default is <strong>true</strong>
                <p>

                <pre><code class="language-javascript">// Turn autoescape off
$('#demo-table').simple_datagrid(
  {
    auto_escape: false
  }
);</code></pre>

                <h3 id="options-data">data</h3>
                <p>
                    Provide the data for the datagrid.
                </p>

                <pre><code class="language-javascript">var data = [
  {
    "latin_name": "Persea americana",
    "name": "Avocado"
  },
  {
    "latin_name": "Capsicum annuum",
    "name": "Bell pepper"
  }
];

$('#demo-table').simple_datagrid(
  {
    data: data
  }
);</code></pre>

                <h3 id="options-on_generate_footer">on_generate_footer</h3>
                <p>
                    Callback function to create footer html.
                    <br>
                    The function looks like this: <strong>function($footer_element, datagrid_widget, data)</strong>
                </p>

<pre><code class="language-javascript">function generate_footer($footer, datagrid, data) {
    $footer.append(
        "&lt;tr&gt;&lt;td colspan="3"&gt;my footer&lt;/td&gt;&lt;/tr&gt;"
    );
}

$('#demo-table').simple_datagrid(
  {
    on_generate_footer: generate_footer
  }
);</code></pre>

                <h3 id="options-on_generate_tr">on_generate_tr</h3>
                <p>
                    Callback function to add html to the row elements.
                    <br>
                    The function looks like this: <strong>function($row_element, row_data)</strong>
                </p>

<pre><code class="language-javascript">function generate_row($row_element, row_data) {
    if (row_data.blocked) {
        $row_element.addClass('blocked');
    }
}</code></pre>

                <h3 id="options-order_by">order_by</h3>
                <p>
                    Enable sorting (true/false/column name). The default is false.
                </p>

<pre><code class="language-javascript">// Enable sorting
$('#demo-table').simple_datagrid(
  {
    order_by: true
  }
);</code></pre>

<pre><code class="language-javascript">// Enable sorting; order by 'name' column
$('#demo-table').simple_datagrid(
  {
    order_by: 'name'
  }
);</code></pre>

                <h2 id="functions">Functions</h2>

                <h3 id="functions-addcolumn">addColumn</h3>
                <p>
                    Add column at the end:
                    <br>
                    <strong>function addColumn(column_info)</strong>
                </p>
                <p>
                    Add column at this index:
                    <br>
                    <strong>function addColumn(column_info, index)</strong>
                </p>

                <p>
                    The column info can be a string with the column title, or an object with column properties.
                </p>

                <pre><code class="language-javascript">// Add column with title 'New column' at the end
// The key will be 'new_column'
$('#demo-table').simple_datagrid('addColumn', 'New column');</code></pre>

                <pre><code class="language-javascript">// Add column 'New column' afer column 2
$('#demo-table').simple_datagrid('addColumn', 'New column', 2);</code></pre>

                <pre><code class="language-javascript">// Add column with title 'New column' and key 'newcolumn'
$('#demo-table').simple_datagrid({
  title: 'New column',
  key: 'newcolumn'
});</code></pre>

                <h3 id="functions-getcolumns">getColumns</h3>
                <p>
                    <strong>function getColumns()</strong>
                    <br>
                    Get column info. Result is a list of objects with 'key' and 'name' property.
                </p>

                <pre><code class="language-javascript">var columns = $('#demo-table').simple_datagrid('getColumns');</code></pre>

                <h3 id="functions-getselectedrow">getSelectedRow</h3>
                <p>
                    <strong>function getSelectedRow()</strong>
                    <br>
                    Return the data of the selected row. If no row is selected, then return null.
                </p>

                <pre><code class="language-javascript">var row = $('#demo-table').simple_datagrid('getSelectedRow');</code></pre>


                <h3 id="functions-loaddata">loadData</h3>
                <p>
                    <strong>function loadData(data)</strong>
                    <br>
                    Load json data.
                </p>

                <pre><code class="language-javascript">var data = [
  {
    "latin_name": "Persea americana",
    "name": "Avocado"
  },
  {
    "latin_name": "Capsicum annuum",
    "name": "Bell pepper"
  }
];
$('#demo-table').simple_datagrid('loadData', data);</code></pre>

                <h3 id="functions-reload">reload</h3>
                <p>
                    <strong>function reload()</strong>
                    <br>
                    Reload the data.
                </p>
                <pre><code class="language-javascript">$('#demo-table').simple_datagrid('reload');</code></pre>

                <h3 id="functions-removecolumn">removeColumn</h3>
                <p>
                    <strong>function removeColumn(column_key);</strong>
                    <br>
                    Remove the column with this key.
                </p>
                <pre><code class="language-javascript">$('#demo-table').simple_datagrid('removeColumn', 'title');</code></pre>

                <h3 id="functions-selectrow">selectRow</h3>
                <p>
                    <strong>function selectRow(row_index);</strong>
                    <br>
                    Select the row with this index.
                </p>
                <pre><code class="language-javascript">// Select the first row
$('#demo-table').simple_datagrid('selectRow', 0);
</code></pre>

                <h3 id="functions-setcurrentpage">setCurrentPage</h3>
                <p>
                    <strong>function setCurrentPage(page_index)</strong>
                    <br>
                    Set current page. This will not reload the data.
                </p>
                <pre><code class="language-javascript">$('#demo-table').simple_datagrid('setCurrentPage', 2);</code></pre>

                <h3 id="functions-setparameter">setParameter</h3>
                <p>
                    <strong>function setParameter(key, value)</strong>
                    <br>
                    Set parameter that will be added to url in ajax query.
                </p>

                <pre><code class="language-javascript">$('#demo-table').simple_datagrid('setParameter', 'abc', 'def');</code></pre>

                <h3 id="functions-url">url</h3>
                <p>
                    Get the url for the json data:
                    <br>
                    <strong>function url()</strong>
                </p>
                <p>
                    Set the url for the json data:
                    <br>
                    <strong>function url(value)</strong>
                </p>

                <pre><code class="language-javascript">var url = $('#demo-table').simple_datagrid('url');</code></pre>

                <pre><code class="language-javascript">$('#demo-table').simple_datagrid('url', '/my_data/');</code></pre>

                <h2 id="events">Events</h2>

                <h3 id="events-load_data">datagrid.load_data</h3>
                <p>
                    The <strong>datagrid.select</strong> event is called when the data for a page is loaded.
                </p>
                <pre><code class="language-javascript">$('#demo-table').bind(
  'datagrid.load_data',
  function() {
    // Data is loaded
  }
);
</code></pre>

                <h3 id="events-select">datagrid.select</h3>
                <p>
                    The <strong>datagrid.select</strong> event is called when a row is selected.
                    <br>
                    The event has the following properties:
                </p>
                <ul>
                    <li><strong>row</strong>: the row data</li>
                    <li><strong>$row</strong>: the row dom element</li>
                </ul>
                <pre><code class="language-javascript">$('#demo-table').bind(
  'datagrid.select',
  function(e) {
    // Row is selected
    console.log(e.row);
  }
);
</code></pre>

            </div>
        </div>
    </div>
    <!--[if lt IE 9]>
        <script src="extra/jquery-1.11.0.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
        <script src="extra/bower_components/jquery/jquery.min.js"></script>
    <!--<![endif]-->
    <script src="extra/bower_components/prism/prism.js"></script>
    <script src="simple.datagrid.js"></script>
    <script src="examples/example-data.js"></script>
    <script src="extra/bower_components/jquery-mockjax/jquery.mockjax.js"></script>
    <script src="extra/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="extra/documentation.js"></script>
</body>
</html>
